<template>
	<text class="status" v-if="product">{{product.statusText}}</text>
	<view class="produce" v-if="product" @click="bindProductInfo">
		<image src="../../static/right-blue.png" class="r-icon" mode=""></image>
		<image src="../../static/product-bg.png" class="product-bg" mode=""></image>
		<view class="footer">
			<view class="price">
				<text class="amount">{{(product.product.limitMoney.interest * 100).toFixed(2)}}</text>
	
				<text class="unit">%</text>
			</view>
			<text class="day">日化率</text>
		</view>
		<view class="right">
			<view class="product-header">
				<image :src="product.product.cover" mode=""></image>
				<text class="product-title">{{product.product.name}} {{ product.product.lockDays}}天</text>
				
			</view>
			
			<text class="note">每日返息，到期还本</text>
			<view class="tips" v-if="product.product.limitNumber">
				<text >限量{{product.product.limitNumber.sumLimitNumber}}份</text>
				<text class="line"></text>
				<text>每份{{product.product.limitNumber.amount}}U限购{{product.product.limitNumber.userLimitNumber}}份</text>
			</view>
			<view class="tips" v-if="product.product.limitMoney">
				<text v-if="product.product.limitMoney">限量{{product.product.limitMoney.sumLimitMoney}}U</text>
				<text class="line"></text>
				<text>限购{{product.product.limitMoney.maxAmount}}U</text>
			</view>
		</view>
	
	
	
	</view>
	<view class="content" v-if="product">
		<view class="item">
			<text>理财编号</text>
			<text>{{product.orderNo}}</text>
		</view>
		<view class="item">
			<text>理财周期</text>
			<text>{{product.cycle}}/{{product.product.lockDays}}天</text>
			
		</view>
		<view class="item">
			<text>日利率</text>
			<text>{{(product.product.limitMoney.interest * 100).toFixed(2)}}%</text>
		</view>
		<view class="item">
			<text>已收益</text>
			<text>{{product.totalAmount}}U</text>
		</view>
	<!-- 	<text> 日利率:{{product.product.interest	}}%</text>
		<text>已收益:{{product.totalAmount	}}U</text>
		 -->
		<view class="item">
			<text>投资金额</text>
			<text>{{product.investAmount}}U</text>
		</view>
		<view class="item">
			<text>投资时间</text>
			<text>{{product.createTime}}</text>
		</view>
	</view>
</template>

<script setup>
	
	import {
		ref
	} from 'vue';
	import {
		userProductGet
	} from '@/util/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const product = ref()
	onLoad((params)=>{
		console.log(params)
		getData(params.id)
	})
	const getData = async (id)=>{
		const result = await userProductGet(id)
		if(result.data.status == "progressing"){
			result.data.statusText = "持仓中"
		}
		if(result.data.status == "end"){
			result.data.statusText = "已结束"
		}
		product.value = result.data
	}
	// 产品详情
	const bindProductInfo = ()=>{
		
		uni.navigateTo({
			// url:"/pages/productInfo/productInfo?id="+product.value.product.id   http://localhost:5173/#/pages/productInfo/productInfo?id=28&pid=45
			url:"/pages/productInfo/productInfo?id="+product.value.product.limitMoney.id+'&pid='+product.value.product.id
		})
	}
</script>

<style lang="scss">
	.content{
		padding: 38rpx 38rpx 10rpx;
		background: #FFFFFF;
		box-shadow: 0px 15rpx 38rpx 2rpx rgba(49,54,70,0.05);
		border-radius: 23rpx;
		margin: 38rpx;
		.item{
			display: flex;
			margin-bottom: 38rpx;
			align-items: flex-start;
			justify-content: space-between;
			text{
				color: #333;
				font-size: 30rpx;
				display: block;
			}
			view{
				text{
					text-align: right;
					margin-bottom: 18rpx;
				}
			}
		}
	}
	.status{
		font-size: 38rpx;
		color: #333;
		display: block;
		margin: 20rpx 38rpx 20rpx;
		font-weight: 800;
	}
	.produce {
		width: 599rpx;
		height: 153rpx;
		margin: 38rpx auto;
		// background: #FFFFFF;
	
		border-radius: 23rpx;
		
		padding: 38rpx;
	
		// background: linear-gradient(120deg, #E4EFFF 0%, #FFFFFF 100%);
		display: flex;
		align-items: center;
		position: relative;
		.product-bg{
			position: absolute !important;
			width: 675rpx;
			height: 240rpx;
			left: 0;
			top: 0;
		}
	
		.right {
			
		}
		.r-icon{
			position: absolute;
			right: 30rpx;
			top: 50%;
			width: 24rpx;
			height: 24rpx;
			margin-top: -12rpx;
			z-index: 9;
		}
		.product-header{
			display: flex;
			align-items: center;
			
			margin-bottom: 20rpx;
			>image{
				display: block;
				width: 38rpx;
				height: 38rpx;
				margin-right: 12rpx;
			}
		}
		.product-title {
			display: block;
			color: #313646;
			font-weight: bold;
			font-size: 31rpx;
			position: relative;
			
		}
	
		.note {
			padding: 2rpx 12rpx;
			height: 42rpx;
			background: #FEF6E9;
			border-radius: 8rpx;
			color: #FF984D;
			font-size: 23rpx;
			line-height: 12rpx;
	position: relative;
	
	
		}
	
		.tips {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
	position: relative;
			text {
				color: #989AA2;
				font-size: 23rpx;
			}
	
			.line {
				display: block;
				width: 2rpx;
				height: 28rpx;
				background: #989AA2;
				margin: 0 20rpx;
			}
		}
	
		.footer {
	position: relative;
			width: 160rpx;
	
			.price {
	
				.amount {
					color: #FF2F22;
					font-size: 40rpx;
					font-weight: bold;
				}
	
				.unit {
					color: #FF2F22;
					font-size: 28rpx;
				}
			}
	
			.day {
				color: #989AA2;
				font-size: 23rpx;
				display: block;
	
			}
	
		}
	}
	page {
		background: #F6F7F9;
	}
</style>